@extends('layouts.admin_master')

@section('content')
    <div class="card">
        <div class="card-header">
            <ul class="nav">
                <li class="nav-item">
                    <a href="{{route('category.category.index')}}" class="nav-link">分类列表</a>
                </li>
                <li class="nav-item">
                    <a href="{{route('category.category.create')}}" class="nav-link active">添加分类</a>
                </li>
            </ul>
        </div>
        <form action="{{route('category.category.update',$category)}}" method="post">
            @csrf @method('PUT')
            <div class="card-body">
                <div class="form-group row">
                    <label class="col-md-2 label-control text-center">分类名称</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" name="category_name" value="{{$category['category_name']}}">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-2 label-control text-center">父级分类</label>
                    <div class="col-md-10">
                        <select name="pid" class="form-control" id="basicSelect">
                            <option value="0" hd="0">顶级分类</option>
                            @foreach($categorys as $v)
                                <option value="{{$v['id']}}" hd="{{$v['pid']}}" {{$category['pid'] == $v['id'] ? 'selected' : ''}}>{{$v['category_name']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group row" id="attrs" {!! ($category->category&&$category->category->pid)?'':'style="display:none"' !!}>
                    <label class="col-md-2 label-control text-center">可用属性</label>
                    <div class="col-md-10">
                        <div class="mb-2">
                            @foreach($attrs as $attr)
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="attrs[]" id="attr{{$attr['id']}}" value="{{$attr['id']}}" {{in_array($attr['id'],$attrIds->toArray())?'checked':''}}>
                                    <label class="form-check-label" for="attr{{$attr['id']}}">{{$attr['attr_name']}}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer text-muted">
                <button type="submit" class="btn btn-bg-gradient-x-purple-blue">保存数据</button>
            </div>
        </form>
    </div>
@endsection
@push('js')
    <script>
        $('#basicSelect').change(function () {
            // 获取当前被选中的option的value值
            var value = $(this).find('option:checked').attr('hd');
            // 判断value的值是否为0,如果为0,代表要么是顶级分类,要么是某一个一级分类,这个时候,应该让可用属性的选择框隐藏,反之,让选择框出来
            if(value == 0){
                // 让选择框隐藏
                $('#attrs').hide();
            }else{
                // 让选择框显示
                $('#attrs').show();
            }
        })
    </script>
@endpush
